<template>
  <interval height="120" />
  <el-alert
    title="sorry，暂无排行榜具体数据 ┗( T﹏T )┛"
    show-icon
    type="error"
  />
  <div class="rank">
    <el-row class="list-container">
      <el-col
        :span="4"
        :xs="10"
        :sm="6"
        :md="4"
        :lg="4"
        :xl="4"
        class="list-item"
        v-for="item in rankList"
        :key="item.id"
      >
        <div class="item-top">
          <img :src="item.coverImgUrl" alt="网络不好" class="img" />
        </div>
        <div class="item-bottom">
          <div class="small-info">
            <span class="update-time">{{ item.updateFrequency }}</span>
            <span class="count">{{ item.trackCount }}首</span>
          </div>
          <div class="description">{{ item.description || '暂无介绍' }}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from 'vuex'

import Interval from '@/components/interval/interval.vue'

export default defineComponent({
  components: {
    Interval
  },
  async setup() {
    const store = useStore()
    await store.dispatch('rank/getRankListAction')
    const rankList = store.state.rank.rankList
    console.log(rankList)

    return { rankList }
  }
})
</script>

<style scoped lang="less">
.rank {
  .list-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    .list-item {
      margin: 10px;
      .item-top {
        margin-bottom: 6px;
        .img {
          display: inline-block;
          width: 100%;
          height: 100%;
        }
      }
      .item-bottom {
        margin-bottom: 20px;
        padding: 0 4px;
        .small-info {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          margin-bottom: 6px;
          .update-time {
            color: rgb(172, 0, 0);
          }
          .count {
            color: #555;
          }
        }

        .description {
          color: #555;
          font-size: 12px;
          height: 40px;
          overflow: hidden;
          text-overflow: '[!!]';
        }
      }
    }
  }
}
</style>
